<template>
	<div>
		<div class="top">
			<el-input v-model="username" placeholder="用户名" style="width: 300px;"></el-input>
			<!-- <el-select placeholder="卡类型" v-model="cardfunc">
				<el-option label="全部" value="all"></el-option>
				<el-option label="注册卡" :value="1"></el-option>
				<el-option label="月卡" :value="2"></el-option>
				<el-option label="年卡" :value="3"></el-option>
				<el-option label="永久卡" :value="4"></el-option>
			</el-select>
			<el-select placeholder="状态" v-model="state">
				<el-option label="全部" value="all"></el-option>
				<el-option label="未使用" :value="1"></el-option>
				<el-option label="已使用" :value="2"></el-option>
			</el-select> -->
			<el-button type="primary" @click="currPage = 1;getList()">查询</el-button>
			<el-button type="primary" @click="add">新增</el-button>
		</div>
		<div class="main">
			<el-table :data="tableData">
				<el-table-column
					v-for="(col,idx) in cols"
					:key="idx"
					:formatter="col.formatter"
					:prop="col.prop"
					:label="col.label"
				></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="edit(scope.row)">编辑</el-button>
						<el-button type="text" @click="del(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				style="margin-top: 20px;"
				@current-change="getList"
				:current-page.sync="currPage"
				:page-size="10"
				layout="total,prev, pager, next, jumper"
				:total="totalRow"
			></el-pagination>
		</div>
		<el-dialog :title="operType === 'add' ? '新增' : '编辑'" :visible.sync="showModal">
			<el-form :model="form">
				<el-form-item label="卡类型" label-width="120px">
					<el-select v-model="form.cardfunc">
						<el-option label="注册卡" :value="1"></el-option>
						<el-option label="月卡" :value="2"></el-option>
						<el-option label="年卡" :value="3"></el-option>
						<el-option label="永久卡" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="生成次数" label-width="120px">
					<el-input v-model="form.times" type="number" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注" label-width="120px">
					<el-input v-model="form.marks" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showModal = false;form = {}">取 消</el-button>
				<el-button type="primary" @click="onOk">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { formatTime } from '@/utils/'
const cardMap = ['', '注册卡', '月卡', '年卡', '永久卡']
const stateMap = ['', '未使用', '已使用']
export default {
	data() {
		return {
			currPage: 1,
			totalRow: 0,
			devices: [],
			username: '',
			cols: [
				{ prop: 'card_num', label: '卡号' },
				{ prop: 'username', label: '卡用户名' },
				// { prop: 'calluser', label: '呼叫用户' },
				{ prop: 'register_time', label: '创建时间', formatter(row, col, cell) { return formatTime(cell) } },
				{ prop: 'end_time', label: '到期时间', formatter(row, col, cell) { return formatTime(cell) } },
				{ prop: 'ip', label: '登录IP' },
				
				// { prop: 'cardfunc', label: '类型', formatter(row, col, cell) { return cardMap[cell] } },
				// { prop: 'state', label: '状态', formatter(row, col, cell) { return stateMap[cell] } },
				{ prop: 'login_time', label: '登录次数' },
				{ prop: 'last_num', label: '最后提交号码' },
				// { prop: 'marks', label: '备注' },
			],
			form: {},
			tableData: [],
			state: '',
			cardfunc: '',
			showModal: false,
			operType: '',
			agentuser: sessionStorage.getItem('user_id')
		}
	},
	created() {
		this.getList()
	},
	methods: {
		getInfo() {
			this.$http({
				url: '/api/get_my_info/',
				method: 'post',
				data: {
					username: sessionStorage.getItem('username')
				}
			}).then(res => {
				console.log(res)
			})
		},
		onOk() {
			if (this.operType === 'add') {
				this.onAdd()
			} else {
				this.onEdit()
			}
		},
		onAdd() {
			this.$http({
				url: '/api/cards/',
				method: 'post',
				data: {
					...this.form,
				}
			}).then(res => {
				this.showModal = false
				this.$succ()
				this.getList()
			})
		},
		onEdit() {
			const id = this.form.id
			const params = { ...this.form }
			delete params.id
			this.$http({
				url: `/api/cards/${id}/`,
				method: 'patch',
				data: {
					...params
				}
			}).then(res => {
				this.showModal = false
				this.getList()
				this.$succ()
			})
		},
		add() {
			this.operType = 'add'
			this.showModal = true
		},
		edit(row) {
			this.form = { ...row }
			this.operType = 'edit'
			this.showModal = true
		},
		del(row) {
			const agentuser = sessionStorage.getItem('user_id')
			this.$http({
				url: `/api/users/${row.id}/?agentuser=${agentuser}`,
				method: 'delete'
			}).then(res => {
				this.$notify.success('操作成功')
				this.getList()
			})
		},
		getList() {
			const { state, cardfunc, agentuser ,username} = this
			// const data = {
			// 	state: state === 'all' ? '' : state,
			// 	cardfunc: cardfunc === 'all' ? '' : cardfunc,
			// 	agentuser
			// }
			const data = {}
			if(username) {
				data.username = username.trim()
			}
			this.$http({
				url: '/api/searchuser/',
				method: 'post',
				data
			}).then(res => {
				this.tableData = res
			})
		}
	}
}

</script>
<style lang="scss" scoped>
.top {
	padding: 20px 30px;
	display: flex;
	background: white;
	> * {
		margin-right: 20px;
	}
	margin-bottom: 20px;
}
.main {
	width: 100%;
	background: white;
	padding: 20px;
}
.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}
</style>


